<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/index/app.css">
  </head>
  <body>
    <div id="app">
    	  <div class="mui-content box-content">
			    <div class="mui-row">
			        <div class="mui-col-sm-6 mui-col-xs-6 div-box">
			              <button type="button" class="mui-btn mui-btn-success" id="caream">相机</button>
			        </div>
			        <div class="mmui-col-sm-6 mui-col-xs-6 div-box">
			              <button type="button" class="mui-btn mui-btn-success" id="wifi">wifi</button>
			        </div>
			    </div>
			    <div class="mui-row">
			        <div class="mui-col-sm-6 mui-col-xs-6 div-box">
			            <button type="button" class="mui-btn mui-btn-success" id="blool">蓝牙</button>
			        </div>
			        <div class="mui-col-sm-6 mui-col-xs-6 div-box">
			            	<button type="button" class="mui-btn mui-btn-success" id="message">截屏</button>
			        </div>
			    </div>
			    <div class="mui-row">
			        <div class="mui-col-sm-6 mui-col-xs-6 div-box">
			            <button type="button" class="mui-btn mui-btn-success" id="Gps">GPS</button>
			        </div>
			        <div class="mui-col-sm-6 mui-col-xs-6 div-box">
			            <button type="button" class="mui-btn mui-btn-success" id="info">消息推送</button>
			        </div>
			    </div>
				</div>
    </div>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/mui.min.js"></script>
    <script>

			(function() {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				mui.plusReady(function() {
//					var self = plus.webview.currentWebview(),
//						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
//					var drawNativeIcon = util.drawNative('icon', {
//						bottom: '5px',
//						left: 0 + 'px',
//						width: '60px',
//						height: '60px'
//					}, [{
//						tag: 'rect',
//						id: 'bg',
//						position: {
//							top: '1px',
//							left: '0px',
//							width: '100%',
//							height: '100%'
//						},
//						rectStyles: {
//							color: '#fff',
//							radius: '50%',
//							borderColor: '#ccc',
//							borderWidth: '1px'
//						}
//					}, {
//						tag: 'rect',
//						id: 'bg2',
//						position: {
//							bottom: '-0.5px',
//							left: '0px',
//							width: '100%',
//							height: '45px'
//						},
//						rectStyles: {
//							color: '#fff'
//						}
//					}, {
//						tag: 'rect',
//						id: 'iconBg',
//						position: {
//							top: '5px',
//							left: '5px',
//							width: '50px',
//							height: '50px'
//						},
//						rectStyles: {
//							color: '#d74b28',
//							radius: '50%'
//						}
//					}, {
//						tag: 'font',
//						id: 'icon',
//						text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'
//						position: {
//							top: '0px',
//							left: '5px',
//							width: '50px',
//							height: '100%'
//						},
//						textStyles: {
//							fontSrc: '_www/fonts/iconfont.ttf',
//							align: 'center',
//							color: '#fff',
//							size: '30px'
//						}
//					}]);
//					// append 到父webview中
//					self.append(drawNativeIcon);

					//自定义监听图标点击事件
//					var active_color = '#fff';
//					drawNativeIcon.addEventListener('click', function(e) {
//						mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
//						// 重绘字体颜色
//						if(active_color == '#fff') {
//							drawNativeIcon.drawText('\ue600', {}, {
//								fontSrc: '_www/fonts/iconfont.ttf',
//								align: 'center',
//								color: '#000',
//								size: '30px'
//							}, 'icon');
//							active_color = '#000';
//						} else {
//							drawNativeIcon.drawText('\ue600', {}, {
//								fontSrc: '_www/fonts/iconfont.ttf',
//								align: 'center',
//								color: '#fff',
//								size: '30px'
//							}, 'icon');
//							active_color = '#fff';
//						}
//
//					});
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);
					
					var 	nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
					
						
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.2)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.2) && clientX <= parseInt(pageW * 0.4)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.4) && clientX <= parseInt(pageW * 0.6)) {
							currIndex = 2;
						} else if(clientX > parseInt(pageW * 0.6) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 3;
						} else {
							currIndex = 4;
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}


						//底部选项卡切换
						util.toggleNview(currIndex);
						// 子页面切换
						util.changeSubpage(targetPage, activePage, aniShow);
						//更新当前活跃的页面
						activePage = targetPage;
					});
				});
				
				// 按钮选择对应页面
				function newPage(id, pages) {
					document.getElementById(id).addEventListener('tap', function() {
  					//打开关于页面
					  mui.openWindow({
					    url: pages
					  });
					});
				}
				newPage('caream', 'html/tab.html')
				newPage('wifi', 'html/text.html')
				newPage('blool', 'html/text3.html')
				newPage('message', 'html/text4.html')
				newPage('Gps', 'html/text5.html')
				newPage('info', 'html/text6.html')
			})();
			
    </script>
    <!-- built files will be auto injected -->
  </body>
</html>
